<template>
  <div class="children">
    <el-form :model="form" v-if="!openNext" :rules="rules" ref="Formdata" size="medium" :inline="true"
      label-width="120px">
      <el-divider>基本信息</el-divider>
      <el-form-item label="标准名称" prop="levelName">
        <el-input v-model="form.levelName" placeholder="请输入标准名称"></el-input>
      </el-form-item>
      <el-form-item label="标准说明" prop="explanation">
        <el-input v-model="form.explanation" placeholder="请输入标准说明"></el-input>
      </el-form-item>
      <br>
      <el-divider>适用设备</el-divider>
      <el-form-item label="" prop="">
        <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleCreated">添加适用设备</el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="noticeList">
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.equipmentNum || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="设备名称" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.equipmentName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.brand || '-' }}
            <!-- <dict-tag :options="statusFlag" :value="scope.row.status" /> -->
          </template>
        </el-table-column>
        <el-table-column label="规格型号" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.model || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="供应商" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.supplierName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.unitName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <div align="center">
        <el-button type="primary" size="medium" @click="CommitNext">下一步</el-button>
        <el-button size="medium" @click="resetQuery">取消</el-button>
      </div>
    </el-form>
    <!-- 添加适用设备 -->
    <template v-if="open">
      <AddEquipment @clearOpen="clearOpen"></AddEquipment>
    </template>
    <!-- 添加保养项目 -->
    <!-- <template v-if="openMain">
      <CreatedMaintainance :title="titleMain" :rowObj="rowObjMain"></CreatedMaintainance>
    </template> -->
    <!-- 添加保养项目 -->
    <template v-if="openNext">
      <CreatedNext :title="titleUpdate" :rowObj="rowObjupkeep"></CreatedNext>
    </template>
  </div>
</template>

<script>
import { getlevelChildren, getUpkeepProjectList, postCreatedUpkeepLevel, putUpdateUpkeepLevel } from '@/api/maintenance/insurance/insurance.js'
export default {
  props: ['title', 'rowObj'],
  components: {
    AddEquipment: () => import('./form/index.vue'),
    // CreatedMaintainance: () => import('./CreatedMaintainance.vue'),
    CreatedNext: () => import('./CreatedNext.vue'),
    // Upload
  },
  data () {
    return {
      open: false,
      openMain: false,
      titleMain: '',
      openNext: false,
      rowObjMain: {},
      rowObjupkeep: {},
      form: {
        levelName: undefined,
        explanation: undefined
      },
      loading: false,
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'upkeepProjectId',
        isAsc: 'desc'//倒叙
      },
      noticeList: [],
      tableList: [],
      rules: {
        levelName: { required: true, message: '必填', trigger: 'blur' },
        explanation: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  computed: {

    titleUpdate: {
      get () {
        return this.title

      },
      set (v) {

      }
    }
  },
  created () {
    this.getList()
    this.getlevel();
  },
  methods: {
    clearOpen (val) {
      this.noticeList = this.noticeList = this.removedup([...this.noticeList, ...val], 'equipmentAccountId')
      this.open = false
    },
    handleDelete (index) {
      this.noticeList.splice(index, 1)
    },
    async getlevel () {
      if (this.titleUpdate === '修改标准') {
        this.loading = true
        let res = await getlevelChildren(this.rowObj.upkeepLevelId);
        this.loading = false
        this.form.levelName = res.data.levelName
        this.form.explanation = res.data.explanation
        this.noticeList = res.data.eaPartInfoVos
      }
    },
    resetQuery () {
      this.$emit('clear')
    },
    async getList () {
      if (this.titleUpdate === '修改标准') {
        this.loading = true
        let param = {
          ...this.queryParams,
          upkeepLevelId: this.rowObj.upkeepLevelId
        }
        let params = await getUpkeepProjectList(param);
        this.tableList = params.data
        this.total = params.total;
        this.loading = false
      }
    },
    /**添加适用设备 */
    handleCreated () {
      this.open = true
    },
    /**编辑保养项目 */
    handleUpdate (row) {
      this.openMain = true
      this.titleMain = '修改保养项目'
      this.rowObjMain = row
    },
    /**添加保养项目 */
    handleAddInsurance () {
      this.openMain = true
      this.titleMain = '添加保养项目'
    },
    /**提交 */
    CommitNext () {
      this.$refs.Formdata.validate((valid) => {
        if (!valid) return
        if (this.titleUpdate === '修改标准') {//修改
          let params = {
            ...this.form,
            upkeepLevelId: this.rowObj.upkeepLevelId,
            eaPartInfoVos: this.noticeList.map(item => {
              return {
                equipmentAccountId: item.equipmentAccountId
              }
            })
          }
          putUpdateUpkeepLevel(params).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              // this.$emit('clear')
              this.rowObjupkeep = { ...this.rowObj, upkeepLevelId: res.data }
              this.openNext = true
            }
          })
        } else {//新增
          let params = {
            ...this.form,
            eaPartInfoVos: this.noticeList.map(item => {
              return {
                equipmentAccountId: item.equipmentAccountId
              }
            })
          }
          postCreatedUpkeepLevel(params).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功')
              // this.$emit('clear')
              this.rowObjupkeep = { ...this.rowObj, upkeepLevelId: res.data }
              this.openNext = true
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 90%;
  margin: 0px auto;
}

.children ::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  text-align: center;
}
</style>